<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <!--    导入vue-->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  <!--    ajax异步请求-->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <input v-model="product.name" placeholder="产品名称"><br/>
  <input v-model="product.num" placeholder="产品数量"><br/>
  <input v-model="product.type" placeholder="产品类型"><br/>
  <input v-model="product.price" placeholder="产品价格"><br/>
  <input type="button" @click="doSubmit" value="提交">
  <br/>

</div>
<script>
  //vue数据模型
  const app = {
    data() {
      return {
        urlPrefix: "/springmvc2_war_exploded",//TODO
        product: {
          name: null,//产品名称
          num: null,//产品数量
          type: null,//产品类型
          price: null,//产品价格
        },
      }
    },
    //事件方法
    methods: {
      ///提交
      doSubmit() {
        //调用接口
        axios.post(this.urlPrefix + "/product/submit", this.product)
            .then((response) => {//http响应码为200会进到这里
              //response.data 为result  , result有map属性, page为map的key
              let result = response.data;
              if (result.code === 200) {
                //输出提示消息
                alert(result.msg);
                //跳转到产品列表
                window.location.href="productList.html";
              }
            })
            .catch((error) => { // 请求失败处理 非200响应码
              // alert(JSON.stringify(error));
              alert(error.response.data.msg);
            });
      }
    }
  }
  //创建一个vue管理的数据模型  绑定html模板视图
  Vue.createApp(app).mount('#app')
</script>

</body>
</html>